<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String server = request.getServerName();
	StringBuilder sb = new StringBuilder();
	int port = request.getServerPort();
	sb.append(request.getScheme()).append("://").append(server).append(port == 80 ? "" : ":" + port).append(request.getContextPath()).append("/");
	request.setAttribute("basePath", sb.toString());
	request.setAttribute("v", System.currentTimeMillis());
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>支付信息</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="${basePath }static/images/favicon.ico?v=${v }" type="image/x-icon" />
	<link href="${basePath }static/css/bootstrap.min.css?v=${v }" rel="stylesheet">
	<link href="${basePath }static/css/dashboard.css?v=${v }" rel="stylesheet">
</head>
<body>
	<nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">支付页面</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">客服中心</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container">
    	<div class="alert alert-warning">
	    		<div class="payinfo">
				    <div class="payinfo_price">
				        <p>订单金额： </p>
				        <p>
				            <span class="price">
				                <dfn>¥</dfn> ${payOrder.orderAmount }
				            </span>
				        </p>
				    </div>
				    <div class="payinfo_detail">
				        <dl>
				            <dt>订单号：${payOrder.orderId }</dt>
				            <dd>${payOrder.subject }</dd>
				        </dl>
				    </div>
				</div>
			
    	</div>
    	<div class="paytitle">
    			<span style="font-weight: bold;">您还需要支付:</span> <dfn>¥</dfn><span class="price"> ${payOrder.orderAmount }</span>
    	</div>
    	<ul class="nav nav-tabs" id="wayTab" style="font-size:16px;font-weight:bold;">
			<li class="active"><a href="#creditCard" data-toggle="tab">信用卡</a></li>
	        <li class=""><a href="#depositCard" data-toggle="tab">储蓄卡</a></li>
	        <li class=""><a href="#thirdPay" data-toggle="tab">第三方支付</a></li>
	        <li class=""><a href="#onLinePay" data-toggle="tab">网上银行</a></li>
	        <li class=""><a href="#wechatPay" data-toggle="tab">微信支付</a></li>
	        <!-- <li class=""><a href="#unionPay" data-toggle="tab">银联手机支付</a></li> -->
	    </ul>
    	<div class="tab-content tabContentborder">
			    	<div class="tab-pane in active" id="creditCard">
			    		<ul class="paylist creditCard">
			    			<li class="selected">
			    				<input type="radio" id="CC_CMB" value="CC_CMB" name="credit_payWay" checked />
			    				<label title="招商银行" for="CC_CMB" class="creditcard_cmb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_CCB" value="CC_CCB" name="credit_payWay" />
			    				<label title="中国建设银行" for="CC_CCB" class="creditcard_ccb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_COMM" value="CC_COMM" name="credit_payWay" />
			    				<label title="交通银行" for="CC_COMM" class="creditcard_comm"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_ICBC" value="CC_ICBC" name="credit_payWay" />
			    				<label title="工商银行" for="CC_ICBC" class="creditcard_icbc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_BOC" value="CC_BOC" name="credit_payWay" />
			    				<label title="中国银行" for="CC_BOC" class="creditcard_boc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_GDB" value="CC_GDB" name="credit_payWay" />
			    				<label title="广发银行" for="CC_GDB" class="creditcard_gdb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_CITIC" value="CC_CITIC" name="credit_payWay" />
			    				<label title="中信银行" for="CC_CITIC" class="creditcard_citic"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_ABC" value="CC_ABC" name="credit_payWay" />
			    				<label title="农业银行" for="CC_ABC" class="creditcard_abc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_CMBC" value="CC_CMBC" name="credit_payWay" />
			    				<label title="民生银行" for="CC_CMBC" class="creditcard_cmbc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_CIB" value="CC_CIB" name="credit_payWay" />
			    				<label title="兴业银行" for="CC_CIB" class="creditcard_cib"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_CEBBANK" value="CC_CEBBANK" name="credit_payWay" />
			    				<label title="光大银行" for="CC_CEBBANK" class="creditcard_cebbank"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_SPABANK" value="CC_SPABANK" name="credit_payWay" />
			    				<label title="平安银行" for="CC_SPABANK" class="creditcard_spabank"></label>
			    			</li>
			    		</ul>
			    		<p style="padding-top: 10px; border-top: 1px dashed #C5C5C5;">境外信用卡请选择卡标识</p>
			    		<ul class="paylist">
			    			<li>
			    				<input type="radio" id="CC_VISA" value="CC_VISA" name="credit_payWay" />
			    				<label title="威士(VISA)" for="CC_VISA" class="creditcard_visa"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_MASTER" value="CC_MASTER" name="credit_payWay" />
			    				<label title="万事达(Master)" for="CC_MASTER" class="creditcard_mastercard"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_AMEX" value="CC_AMEX" name="credit_payWay" />
			    				<label title="运通(AMEX)" for="CC_AMEX" class="creditcard_americanexpress"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="CC_JCB" value="CC_JCB" name="credit_payWay" />
			    				<label title="JCB" for="CC_JCB" class="creditcard_jcb"></label>
			    			</li>
			    		</ul>
			    	</div>
			    	
			    	<div class="tab-pane in" id="depositCard">
			    		<ul class="paylist depositCard">
			    			<li class="selected">
			    				<input type="radio" id="DC_BOC" value="DC_BOC" name="deposit_payWay" checked/>
			    				<label title="中国银行" for="DC_BOC" class="creditcard_boc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_CCB" value="DC_CCB" name="deposit_payWay" />
			    				<label title="中国建设银行" for="DC_CCB" class="creditcard_ccb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_CEBBANK" value="DC_CEBBANK" name="deposit_payWay" />
			    				<label title="光大银行" for="DC_CEBBANK" class="creditcard_cebbank"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_CIB" value="DC_CIB" name="deposit_payWay" />
			    				<label title="兴业银行" for="DC_CIB" class="creditcard_cib"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_CMB" value="DC_CMB" name="deposit_payWay" />
			    				<label title="招商银行" for="DC_CMB" class="creditcard_cmb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_ICBC" value="DC_ICBC" name="deposit_payWay" />
			    				<label title="工商银行" for="DC_ICBC" class="creditcard_icbc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="DC_ABC" value="DC_ABC" name="deposit_payWay" />
			    				<label title="农业银行" for="DC_ABC" class="creditcard_abc"></label>
			    			</li>
			    		</ul>
			    	</div>
			    	
			    	<div class="tab-pane in" id="thirdPay">
			    		<ul class="paylist thirdPay">
			    			<li class="selected">
			    				<input type="radio" id="TD_Tenpay" value="Tenpay" name="thirdPay_payWay" checked />
			    				<label for="TD_Tenpay" title="财付通" class="more_tenpay"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="TD_Alipay" value="Alipay" name="thirdPay_payWay" />
			    				<label title="支付宝" for="TD_Alipay" class="more_alipay"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="TD_alipayscan" value="alipayscan" name="thirdPay_payWay" />
			    				<label title="支付宝扫码" for="TD_alipayscan" class="more_alipayscan"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="TD_unionpay" value="unionpay" name="thirdPay_payWay" />
			    				<label title="银联在线支付" for="TD_unionpay" class="more_unionpay"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="TD_99bill" value="Bill99" name="thirdPay_payWay" />
			    				<label title="快钱" for="TD_99bill" class="more_99bill"></label>
			    			</li>
			    		</ul>
			    	</div>
			    	
			    	<div class="tab-pane in" id="onLinePay">
			    		<ul class="paylist onLinePay">
			    			<li class="selected">
			    				<input type="radio" id="OL_ICBC" value="OL_ICBC" name="onLinePay_payWay" checked />
			    				<label title="工商银行" for="OL_ICBC" class="creditcard_icbc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_CCB" value="OL_CCB" name="onLinePay_payWay" />
			    				<label title="中国建设银行" for="OL_CCB" class="creditcard_ccb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_BOC" value="OL_BOC" name="onLinePay_payWay" />
			    				<label title="中国银行" for="OL_BOC" class="creditcard_boc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_CMB" value="OL_CMB" name="onLinePay_payWay" />
			    				<label title="招商银行" for="OL_CMB" class="creditcard_cmb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_SPDB" value="OL_SPDB" name="onLinePay_payWay" />
			    				<label title="浦发银行" for="OL_SPDB" class="creditcard_spdb"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_ABC" value="OL_ABC" name="onLinePay_payWay" />
			    				<label title="农业银行" for="OL_ABC" class="creditcard_abc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_psbc" value="OL_psbc" name="onLinePay_payWay" />
			    				<label title="中国邮政储蓄银行" for="OL_psbc" class="creditcard_psbc"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_comm" value="OL_comm" name="onLinePay_payWay" />
			    				<label title="交通银行" for="OL_comm" class="creditcard_comm"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_bjbank" value="OL_bjbank" name="onLinePay_payWay" />
			    				<label title="北京银行" for="OL_bjbank" class="creditcard_bjbank"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_CEBBANK" value="OL_CEBBANK" name="onLinePay_payWay" />
			    				<label title="光大银行" for="OL_CEBBANK" class="creditcard_cebbank"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_CIB" value="OL_CIB" name="onLinePay_payWay" />
			    				<label title="兴业银行" for="OL_CIB" class="creditcard_cib"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_citic" value="OL_citic" name="onLinePay_payWay" />
			    				<label title="中信银行" for="OL_citic" class="creditcard_citic"></label>
			    			</li>
			    			<li>
			    				<input type="radio" id="OL_shbank" value="OL_shbank" name="onLinePay_payWay" />
			    				<label title="上海银行" for="OL_shbank" class="creditcard_shbank"></label>
			    			</li>			    			
			    		</ul>
			    	</div>
			    	<div class="tab-pane in" id="wechatPay">
			    		<div class="paybox_wx">
			    			<div class="wx_sale">
									<span class="ico_wx"></span><strong>微信</strong>
								</div>
								<div class="wx_tip">
									<div class="wx_tip_pic"></div>
									<strong>提示：</strong>点击“下一步”后，请打开手机微信的“扫一扫”，扫描二维码
								</div>
			    		</div>
			    	</div>
			</div>

    		<form method="post" action="${basePath }BillPay/PayProcess">
				<input type="hidden" name="userId" value="${payOrder.userId }"/>
	            <input type="hidden" name="orderId" value="${payOrder.orderId }"/>
	            <input type="hidden" name="orderAmount" name="orderAmount" value="${payOrder.orderAmount }"/>
	            <input type="hidden" name="subject" value="${payOrder.subject }"/>
	            <input type="hidden" name="token" value="${payOrder.token }"/>
	            <input type="hidden" name="payWay" id="payWay" value="CC_CMB"/>
	            <input type="hidden" name="payType" value="creditCard" id="payType"/>
		    	<div style="text-align:center;">
			    	<button type="submit" class="btn btn-default">下一步</button>
		    	</div>
		    </form>
    </div>
	<script src="${basePath }static/js/jquery-1.11.1.min.js?v=${v }"></script>
	<script src="${basePath }static/js/bootstrap.min.js?v=${v }"></script>
	<!--[if lt IE 9]>
	<script src="${basePath }static/js/html5shiv.js?v=${v }"></script>
	<script src="${basePath }static/js/respond.min.js?v=${v }"></script>
	<![endif]-->
	<script> 
		$(function() {
			$('#wayTab a').click(function(e) {
				var tName = $(this).attr("href");
				tName= tName.replace(/#/, "");
				$('#payType').val(tName);
				if(tName!='wechatPay'){
					$('.'+tName+' input[type=radio]:checked').each(function() {
						$('#payWay').val($(this).val());
					});
				}else{
					$('#payWay').val('');
				}
			});
			
			$("input[name='credit_payWay']").change(function(e) {
				$(".creditCard li").removeClass("selected");
				$(this).parent().addClass("selected");
				$('#payWay').val($(this).val());
			});
			$("input[name='deposit_payWay']").change(function(e) {
				$(".depositCard li").removeClass("selected");
				$(this).parent().addClass("selected");
				$('#payWay').val($(this).val());
			});
			$("input[name='thirdPay_payWay']").change(function(e) {
				$(".thirdPay li").removeClass("selected");
				$(this).parent().addClass("selected");
				$('#payWay').val($(this).val());
			});
			$("input[name='onLinePay_payWay']").change(function(e) {
				$(".onLinePay li").removeClass("selected");
				$(this).parent().addClass("selected");
				$('#payWay').val($(this).val());
			});
		})
	</script>
</body>
</html>